<template>
	<div class="goods_list table-theme">
		<head-title title="商品--工厂商品"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="styleList"
						:value="style_id"
						placeholder="风格分类"
						type="style_id"
						@value="setSelectValue"
						label-name="style_name"
						value-name="style_id"
					>
					</select-view>
					<select-view
						:option-list="spaceList"
						:value="space_id"
						placeholder="空间"
						type="space_id"
						@value="setSelectValue"
						label-name="space_name"
						value-name="space_id"
					>
					</select-view>
					<select-view
						:option-list="classList"
						:value="class_id"
						placeholder="品类"
						type="class_id"
						@value="setSelectValue"
						label-name="class_name"
						value-name="class_id"
					>
					</select-view>
					<select-view
						:option-list="statusList"
						:value="is_sale"
						placeholder="上下架"
						type="is_sale"
						@value="setSelectValue"
					>
					</select-view>
					<select-view
						:option-list="goodsType"
						:value="is_goods"
						placeholder="单品/套餐"
						type="is_goods"
						@value="setSelectValue"
					>
					</select-view>
					<select-view
						:option-list="orderByList"
						:value="order_by"
						placeholder="排序"
						type="order_by"
						@value="setSelectValue"
					>
					</select-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
					<el-button style="marginRight:10px" type="primary" @click="dialogVisible = true">商品导出</el-button>
				</div>
			</div>
			<p class="data-number">总商品数：{{ total }}</p>
			<el-table :data="goodsList">
				<el-table-column label="序号" align="center" prop="goods_id"></el-table-column>
				<el-table-column label="型号" align="center" prop="goods_sn"></el-table-column>
				<el-table-column label="名称" align="center" prop="goods_name"></el-table-column>
				<el-table-column label="空间" align="center" prop="space_name"></el-table-column>
				<el-table-column label="风格" align="center" prop="style_name"></el-table-column>
				<el-table-column label="品类" align="center" prop="class_name"></el-table-column>
				<el-table-column label="主图" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image_middle"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="销量" align="center" prop="number"></el-table-column>
				<el-table-column label="点击量" align="center" prop="click"></el-table-column>
				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.is_sale" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.goods_id, scope.row.is_examine)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="备注" align="center" prop="goods_remarks" v-if="is_sale == 2"></el-table-column>
				<el-table-column label="操作" align="center" width="220">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="goodsDetails(scope.row.goods_id)">详情</el-button>
						<el-button v-if="scope.row.is_top==0 && admin_type == 1" type="primary" size="mini" @click="setGoodsTop(scope.$index,scope.row.goods_id,scope.row.is_top)">置顶</el-button>
						<el-button v-if="scope.row.is_top==1 && admin_type == 1" type="danger" size="mini" @click="setGoodsTop(scope.$index,scope.row.goods_id,scope.row.is_top)">取消置顶</el-button>
						<!-- <el-button v-if="admin_id == 3" type="primary" size="mini" @click="edit(scope.row.goods_id, scope.row.is_examine)">编辑</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
		<el-dialog title="下架备注" :close-on-click-modal="false" :visible.sync="remarkDialogVisible" center :modal-append-to-body="false" width="480px" @closed="onCloseRemark">
			<el-form :model="upDownForm" :rules="upDownFormRules" ref="upDownForm" label-width="100px">
				<el-form-item label="备注：" prop="remarks">
					<el-input v-model="upDownForm.remarks"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="remarkDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitUpDowmForm">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="数据页数" :close-on-click-modal="false" :visible.sync="dialogVisible" center :modal-append-to-body="false"
		 width="480px">
		 	<el-form :model="exportForm" :rules="exportFormRules" ref="exportForm" label-width="100px">
				 <el-form-item label="条数" prop="exportLimit">
					 <el-input v-model="exportForm.exportLimit" placeholder="请输入数据条数" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"></el-input>
				 </el-form-item>
				 <el-form-item label="页数" prop="exportPage">
					 <el-input v-model="exportForm.exportPage" placeholder="请输入数据页数" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"></el-input>
				 </el-form-item>
			 </el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="exportDataExcel('exportForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import SelectView from "@/components/SelectView";
	export default {
		components: {
			ImgPopover,
			SelectView
		},
		name: 'f_goods_list',
		data() {
			return {
				admin_type: localStorage.getItem('admin_type'),
				admin_id: localStorage.getItem('admin_id'),
				goodsList: [], // 商品列表
				total: 0,totalData: 0,  // 数据总数
				style_id: '', // 风格
				space_id: '', // 空间
				class_id: '', // 品类
				is_sale: 1, // 上下架
				is_goods: 1, // 单品或者套餐
				order_by: 1, // 排序
				page: 0,
				styleList: [],
				spaceList: [],
				classList: [],
				upDownForm:{
					factory_id: localStorage.getItem('factory_id'),
					goods_id:"",
					is_sale:"",
					remarks:""
				},
				remarkDialogVisible:false,
				upDownFormRules:{
					remarks:[{required:true,message:'请输入备注'}]
				},
				is_submit:false,
				searchOption: [
					{
						value: 0,
						label: "型号",
					},
					{
						value: 1,
						label: "商品ID",
					},
					{
						value: 2,
						label: "商品名",
					},
				],
				classSelect: 0,
				selectContent: "",
				dialogVisible:false,
				exportForm:{
					exportPage:0,
					exportLimit:20
				},
				exportFormRules:{
					exportPage:[{required:true,message:'请输入条数'}],
					exportLimit:[{required:true,message:'请输入页数'}],
				},
				statusList:[
					{
						value:1,
						label:'上架'
					},
					{
						value:2,
						label:'下架'
					}
				],
				goodsType:[
					{
						value:1,
						label:'单品'
					},
					{
						value:2,
						label:'套餐'
					}
				],
				orderByList:[
					{
						value:1,
						label:'时间'
					},
					{
						value:2,
						label:'大小'
					},
					{
						value:3,
						label:'序号'
					}
				],
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					style_id: this.style_id,
					space_id: this.space_id,
					class_id: this.class_id,
					is_sale: this.is_sale,
					is_goods: this.is_goods,
					factory_sn: localStorage.getItem('factory_sn')
				};
				if (this.$route.query.factory_id != undefined && this.$route.query.factory_sn != undefined) {
					data.factory_id = this.$route.query.factory_id
					data.factory_sn = this.$route.query.factory_sn
				}

				if (this.order_by == 1) {
					data.order_by = 'add_time';
				} else if (this.order_by == 2) {
					data.order_by = 'sort';
				}else if (this.order_by == 3 ){
					data.order_by = 'number'
				}

				if (this.style_id == 0) {
					delete data.style_id;
				}
				if (this.space_id == 0) {
					delete data.space_id;
				}
				if (this.class_id == 0) {
					delete data.class_id;
				}

				if (this.classSelect == 0) {
					data.keyword = this.selectContent;
				} else if (this.classSelect == 1) {
					data.goods_id = this.selectContent;
				} else if (this.classSelect == 2) {
					data.keyword = this.selectContent;
				}

				this.$http(this.$ApiList.GoodsList, data).then(res => {
					this.goodsList = [];
					res.datas.data.forEach(item => {
						this.goodsList.push(item);
					});
					this.total = res.datas.count;
				});
			},

			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			// 上下架
			upDown(e, id, is_examine) {
				if (is_examine == 1) {
					this.$layer.msg('该商品在审核中，禁止重复修改');
					return;
				}
				this.upDownForm.goods_id = id;
				this.upDownForm.is_sale = e;
				this.remarkDialogVisible = true;
			},
			refreshPage() {
				this.is_sale = '1';
				this.page = 1;
				this.style_id = '';
				this.selectContent = '';
				this.classSelect = 0;
				this.space_id = '';
				this.class_id = '';
				this.is_goods = '1';
				this.init();
			},
			// 商品详情
			goodsDetails(goodsId) {
				this.$router.push({
					path: '/goods_details',
					query: {
						type: 1,
						id: goodsId
					}
				});
			},
			getClassify() {
				// 风格
				this.$http(this.$ApiList.StyleList).then(res => {
					this.styleList = res.datas;
				});
				// 空间
				this.$http(this.$ApiList.SpaceList).then(res => {
					this.spaceList = res.datas;
				});
				// 品类
				this.$http(this.$ApiList.ClassList).then(res => {
					this.classList = res.datas.reverse();
				});
			},
			edit(id, is_examine) {
				if (is_examine == 1) {
					this.$layer.msg('该商品在审核中，禁止重复修改');
					return;
				}
				this.$router.push({
					path: '/edit_goods',
					query: {
						id: id
					}
				});
			},
			setGoodsTop(index, goods_id, is_top) {
				let data = {
					goods_id: goods_id
				}
				this.$http(this.$ApiList.GoodsTop, data).then(res => {
					if(is_top === 0){
						this.goodsList[index].is_top = 1
					}else{
						this.goodsList[index].is_top = 0
					}	
				});
			},
			exportDataExcel(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let factory_id = localStorage.getItem('factory_id');
							window.open(`${this.$domain}furniture/Adminexcel/FactoryGetGoodsDataExcel?factory_id=${factory_id}&page=${this.exportForm.exportPage}&limit=${this.exportForm.exportLimit}`);
							this.dialogVisible = false;
					}
				})
				
			},
			submitUpDowmForm(){
				if(!this.upDownForm.remarks){
					this.$message.error('请填写备注');
					return;
				}
				if(this.is_submit){
					return false;
				}
				this.is_submit = true;
				this.$http(this.$ApiList.FactoryOnSale, this.upDownForm).then(res => {
					this.$layer.msg(res.datas);
					this.init(this.page);
					this.remarkDialogVisible = false;
					let timer = setTimeout(()=>{
						this.is_submit = false;
					},1000)
					this.$once("hook:beforeDestroy",()=>{
						clearTimeout(timer)
					})	
				});
			},
			// 关闭
			onCloseRemark(){
				this.remarkDialogVisible = false;
				this.is_submit = false;
				let goods_id = this.upDownForm.goods_id;
				this.goodsList.forEach((item,index)=>{
					if(item.goods_id == goods_id){
						if(item.is_sale == 2){
							this.$set(this.goodsList[index],'is_sale',1)
						}else{
							this.$set(this.goodsList[index],'is_sale',2)
						}
					}
				})
			},
			setSelectValue(obj){
				const { type,value } = obj
				switch (type) {
					case 'style_id':
						this.style_id = value
						break;
					case 'space_id':
						this.space_id = value
						break
					case 'class_id':
						this.class_id = value
						break
					case 'is_sale':
						this.is_sale = value
						break
					case 'is_goods':
						this.is_goods = value
						break
					case 'order_by':
						this.order_by = value
						break
					case 'goods_type':
						this.goods_type = value
						break
					default:
					break;
				}
				this.init()
			}
		},
		created() {
			this.init();
			this.getClassify();
		}
	};
</script>
<style lang="scss">
	.goods_list {

		.btn-group {
			display: flex;
			margin-top: 10px;
		}

		.btn-group .btn-item {
			margin-right: 10px;
		}
	}
</style>
